import React from 'react'
import Luo from 'iscroll-luo';
import { useState ,useEffect} from "react"
import axios from 'axios';
function Onpull() {
    let [data, setData] = useState([])
    let onDown =()=> {
        getlistdata("xiala")
        // setData([1,2,3])
      /** 注意此处，就算没有数据或接口调用失败了等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/
    }
    useEffect(()=>{
        getlistdata()
    },[])
    let getlistdata = (ispull)=>{
        if ( ispull === "xiala" || typeof(ispull)==="undefined" ) {
            axios.get("/list").then(res=>{
                console.log(res.data);
                setData(res.data)
            })
        } else if (ispull === "shangla") {
            axios.get("/list").then(res=>{
                console.log(res.data);
                setData((data)=>[...data,...res.data])
            })
        } 
    }
    let onUp=()=> {
        getlistdata("shangla")
     
    }
    return (
        <div style={{ position: 'relative', height: '100vh' }}>
            <Luo
                id='id'
                onDown={() => onDown()}
                onUp={() => onUp()}
            >
                {
                    data.map((v, i) =>
                        <div key={i}>
                            <h4>{v.name}</h4>
                            <img src={v.img} alt="" />
                        </div>
                    )
                }
            </Luo>
        </div>
    )
}

export default Onpull


